﻿@{
    ViewData["Title"] = "Home Page";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="~/css/busway.css" rel="stylesheet" />
    <link href="~/countdowntimer/css/countdowntimer.css" rel="stylesheet" />
    <script type="text/javascript" src="~/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="~/buswayline/kinetic-v5.1.0.js"></script>
    <script type="text/javascript" src="~/buswayline/Buswaymap.js"></script>
    <script type="text/javascript" src="~/buswayline/LineLayer.js"></script>
    <script type="text/javascript" src="~/buswayline/StationLayer.js"></script>
    <script type="text/javascript" src="~/buswayline/Station.js"></script>
    <script type="text/javascript" src="~/buswayline/StationName.js"></script>
    <script type="text/javascript" src="~/buswayline/StationCode.js"></script>
    <script type="text/javascript" src="~/buswayline/buslines.js"></script>
    <script type="text/javascript" src="~/buswayline/singlebuslines.js"></script>
    <script type="text/javascript" src="~/buswayline/exchangestoplayer.js"></script>
    <script type="text/javascript" src="~/buswayline/buswayconfig.js"></script>
    <script type="text/javascript" src="~/layuiadmin/xm-select.js"></script>
    <script src="~/countdowntimer/js/countdown.js"></script>
</head>
<body class="backimg">
    <div id="mask" style="display:none;">
        <div class="loader-container">
            <div class="loader">&nbsp;</div>
            <div class="loading-text">数据正在加载...</div>
        </div>
    </div>

    <div id="testSelect" style="width:200px;margin:auto;"></div>
    <div class="scaleOperation">
        <img src="../images/amplification.png" onclick="zoom(1)" width="40" height="40" />
        <img src="../images/reduce.png" onclick="zoom(-1)" width="40" height="40" />

        <div class="countdown countdown-container">
            <div class="clock-item col-md-3">
                    <div class="inner">
                        <div id="canvas-seconds"></div>
                    <div class="countdown-text">
                            <p class="time-remain">0</p>
                        </div>
                    </div>
                </div>
        </div>

        @* <img src="../images/reloadbus.png" onclick="reload()" width="40" height="40" />
        <img src="../images/bus.png" onclick="addBus()" width="40" height="40" />
        <img src="../images/import.jpg" onclick="" width="30" height="30" />
        <img src="../images/export.jpg" onclick="" width="30" height="30" />
        <img src="../images/save.jpg" onclick="" width="30" height="30" />*@
    </div>

    <div class="switchArea">
        切换区域线路：<select id="selArea" onchange="selArea()">
            <option value="1">北京市区段</option>
            <option value="2">昌平段</option>
        </select>
        <input value="添加虚拟站" onclick="addVirtualStation()" class="navOperation" type="button" />
        <input value="添加车站" onclick="addArbitrarilyStation()" class="navOperation" type="button" />
    </div>

    <div class="panel" id="panel" style="display:none;">
        <div id="movePanel" style="height:30px;background-color:#2b6cb0">
            <span><label style="margin-left:10px;line-height: 30px;"> ！</label>详情</span>
            <label style="float:right;margin-right: 10px;cursor:pointer;" onclick="document.getElementById('panel').style.display='none';">×</label>
        </div>
        <div class="stationDetail">
            <table>
                <tr>
                    <td class="td-name">线路：</td>
                    <td class="in-text">
                        <select id="lineName">
                        </select>
                    </td>
                </tr>
                <tr style="display:none">
                    <td class="td-name">Code：</td>
                    <td class="in-text">
                        <input type="text" value="" id="routeMapStopID" disabled="true" />
                    </td>
                </tr>
                <tr>
                    <td class="td-name">站台名：</td>
                    <td class="in-text"><input type="text" value="" id="stopChiName" /></td>
                </tr>
                <tr>
                    <td class="td-name">英文名：</td>
                    <td class="in-text"><input type="text" value="" id="stopName" /></td>
                </tr>
                <tr>
                    <td class="td-name">X 轴：</td>
                    <td class="in-text"><input type="number" value="" id="stopX" /></td>
                </tr>
                <tr>
                    <td class="td-name">Y 轴：</td>
                    <td class="in-text"><input type="number" value="" id="stopY" /></td>
                </tr>
                <tr>
                    <td class="td-name">offset X：</td>
                    <td class="in-text"><input type="number" value="" id="offsetX" /></td>
                </tr>
                <tr>
                    <td class="td-name">offset Y：</td>
                    <td class="in-text"><input type="number" value="" id="offsetY" /></td>
                </tr>
                <tr>
                    <td class="td-name">color：</td>
                    <td class="in-text"><input type="color" id="colorPicker" value="" /></td>
                </tr>
                <tr>
                    <td class="td-name">换乘：</td>
                    <td class="in-text"><input type="checkbox" style="width:20px;height:20px;margin-top:7px;" value="" id="exchangeStop" /></td>
                </tr>
            </table>
        </div>
        <div class="opertionButton">
            <input type="button" value="修改保存" class="oper" onclick="updateStation()" />
            <input type="button" value="添加" class="oper" onclick="addStation()" />
            <input type="button" value="移除" onclick="delStation()" />
        </div>
    </div>

    <div class="stationCollection" id="stationCollection" style="display:none;">
        <div style="height:30px;background-color:#2b6cb0">
            <label style="cursor:pointer;margin-left:140px;" onclick="document.getElementById('stationCollection').style.display='none';">×</label>
        </div>
        <ul class="list">
        </ul>

        <div class="opertionButton">
            <input type="button" value="保存" onclick="operationDragStation()" />
        </div>
    </div>

    <div class="lineDraw">
        <ul>
            <li onclick="handLineDraw(event,1)"> <svg viewBox="0 0 24 24" height="40" width="40" focusable="false" aria-hidden="true"><path d="M10 10 L110 10" stroke="currentColor" fill="none"></path></svg> 直线</li>
            <li onclick="handLineDraw(event,2)"><svg viewBox="0 0 24 24" height="40" width="40" focusable="false" aria-hidden="true"><path d="M9,6L15,12L9,18" stroke="currentColor" fill="none"></path></svg>直角</li>
            <li onclick="handLineDraw(event,3)"><svg viewBox="0 0 24 24" height="40" width="40" focusable="false" aria-hidden="true"><path d="M9,18V12L15,6" stroke="currentColor" fill="none"></path></svg>曲线</li>
        </ul>
    </div>

    <div id="busPanelDetail" class="busPanelDetail" style="display:none;">
        <label style="float:right;margin-right: 10px;cursor:pointer;" onclick="document.getElementById('busPanelDetail').style.display='none';">×</label>
        <h1>ceshi1</h1>
        <table>
            XXXXXXX
            <input type="text" />
        </table>
    </div>

    <div id="virtualStop" class="virtualStop" style="display:none;">
        <div style="height:30px;background-color:#2b6cb0;border-radius: 10px;">
            <span style="margin-left:10px;line-height: 30px;">添加虚拟车站</span>
            <label style="float:right;margin-right: 10px;cursor:pointer;" onclick="document.getElementById('virtualStop').style.display='none';">×</label>
        </div>
        <div class="virtualStopDetail">
            <table>
                <tr>
                    <td class="td-name">线路：</td>
                    <td class="vir-text">
                        <select id="virtualLineName">
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="td-name">X 轴：</td>
                    <td class="vir-text"><input type="number" value="" /></td>
                </tr>
                <tr>
                    <td class="td-name">Y 轴：</td>
                    <td class="vir-text"><input type="number" value="" /></td>
                </tr>
            </table>
        </div>
        <div class="opertionButton">
            <input type="button" value="添加" onclick="addVirStation()" />
        </div>
    </div>

    <div id="arbitrarilyStation" class="arbitrarilyStation" style="display:none;">
        <div style="height:30px;background-color:#2b6cb0;border-radius: 10px;">
            <span style="margin-left:10px;line-height: 30px;">添加车站</span>
            <label style="float:right;margin-right: 10px;cursor:pointer;" onclick="document.getElementById('arbitrarilyStation').style.display='none';">×</label>
        </div>
        <div class="arbitrarilyStationDetail">
            <table>
                <tr>
                    <td class="td-name">线路：</td>
                    <td class="in-text">
                        <select id="arbitrarily_lineName">
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="td-name">站台名：</td>
                    <td class="ar-text"><input type="text" value="" /></td>
                </tr>
                <tr>
                    <td class="td-name">英文名：</td>
                    <td class="ar-text"><input type="text" value="" /></td>
                </tr>
                <tr>
                    <td class="td-name">X 轴：</td>
                    <td class="ar-text"><input type="number" value="" /></td>
                </tr>
                <tr>
                    <td class="td-name">Y 轴：</td>
                    <td class="ar-text"><input type="number" value="" /></td>
                </tr>
                <tr>
                    <td class="td-name">offset X：</td>
                    <td class="ar-text"><input type="number" value="" /></td>
                </tr>
                <tr>
                    <td class="td-name">offset Y：</td>
                    <td class="ar-text"><input type="number" value="" /></td>
                </tr>
                <tr>
                    <td class="td-name">换乘：</td>
                    <td class="ar-text"><input type="checkbox" style="width:20px;height:20px;margin-top:7px;" value="" id="ar_transferStation" /></td>
                </tr>
            </table>
        </div>
        <div class="opertionButton">
            <input type="button" value="保存" class="oper" onclick="saveArbitrarilyStation()" />
        </div>
    </div>

    <div id="subwayMap" style="padding-top:40px;">
    </div>




    <script type="text/javascript">

        $('.countdown').countDown({
            "second": 10,

        }, test);

        $(".countdown-text").click(function () {
            reSetCountDown();
        })


        function test() {
            return "23232323";
        }
        // 初始化XMSelect
        var demo1 = xmSelect.render({
            el: '#testSelect',
            data: [
                { name: '苹果', value: 1 },
                { name: '香蕉', value: 2 },
                { name: '橙子', value: 3 },
                { name: '荔枝', value: 4 },
                { name: '葡萄', value: 5 },
                { name: '荔枝1', value: 6 },
                { name: '葡萄2', value: 7 }
            ],
            filterable: true,
            toolbar: { show: true, list: ["ALL", "CLEAR", "REVERSE"] }
        })

        // 获取选中值, demo1.getValue();
        demo1.setValue([{ name: '苹果', value: 1 }]);

        var browser = {
            versions: function () {
                var u = navigator.userAgent;
                return {
                    trident: u.indexOf('Trident') > -1,
                    presto: u.indexOf('Presto') > -1,
                    webKit: u.indexOf('AppleWebKit') > -1,
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/) && u.indexOf('QIHU') && u.indexOf('QIHU') > -1 && u.indexOf('Chrome') < 0,
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
                    iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,
                    iPad: u.indexOf('iPad') > -1,
                    webApp: u.indexOf('Safari') == -1
                }
            }(),
            language: (navigator.browserLanguage || navigator.language).toLowerCase()
        };

        // if (!browser.versions.mobile && !browser.versions.ios && !browser.versions.android && !browser.versions.iPhone && !browser.versions.iPad) {
        //     alert("PC 端")
        // } else {
        //     alert("移动端");
        // }
        // console.log("语言版本: " + browser.language + "</br>");
        // console.log(" 是否为移动终端: " + browser.versions.mobile + "</br>");
        // console.log(" ios终端: " + browser.versions.ios + "</br>");
        // console.log(" android终端: " + browser.versions.android + "</br>");
        // console.log(" 是否为iPhone: " + browser.versions.iPhone + "</br>");
        // console.log(" 是否iPad: " + browser.versions.iPad + "</br>");
        // console.log(navigator.userAgent + "</br>");

        /**
         * 修改站点
         */
        function updateStation() {
            if (confirm("确认修改车站信息吗？")) {
                var _this = $(".in-text>input");
                var lineName = $("#lineName").val();
                var isExchangeStop = $('#exchangeStop').is(':checked')
                var result = [];
                for (item of demo1.getValue()) {
                    result.push(item.value);
                }
                console.log(result);
                // updateMapStation(lineName, _this.eq(0).val(), _this.eq(1).val(), _this.eq(2).val(), _this.eq(3).val(), _this.eq(4).val(), _this.eq(5).val(), _this.eq(6).val(), _this.eq(7).val(), isExchangeStop);
            }
        }

        /**
         * 添加站点
         */
        function addStation() {
            if (confirm("确认新增车站吗？")) {
                var _this = $(".in-text>input");
                var lineName = $("#lineName").val();
                var isExchangeStop = $('#exchangeStop').is(':checked');
                addMapStation(lineName, _this.eq(1).val(), _this.eq(2).val(), _this.eq(3).val(), _this.eq(4).val(), _this.eq(5).val(), _this.eq(6).val(), isExchangeStop);
                $(".panel,.stationCollection").hide();
            }
        }

        /**
         * 删除指定站点
         */
        function delStation() {
            if (confirm("确认删除当前车站吗？")) {
                var _this = $(".in-text>input");
                var lineName = $("#lineName").val();
                delMapStation(lineName, _this.eq(0).val());
                $(".panel,.stationCollection").hide();
            }
        }

        /**
         * 切换 区域
         */
        function selArea() {
            var selArea = $("#selArea").val();
            switchLineArea(selArea);
        }

        /**
         * 执行地图缩放操作
         */
        function zoom(num) {
            mapZoom(num);
        }

        /**
         * 刷新 bus 位置
         */
        function reload() {
            reloadBusLocation();
        }

        /**
         * 添加 Bus
         */
        function addBus() {
            addCurrentBus();
        }

        /**
         * 站点拖拽操作
         */
        function operationDragStation() {
            saveStationList();
        }

        /**
         * 添加虚拟站点
         */
        function addVirtualStation() {
            $(".virtualStop").show();
        }

        /**
         * 保存虚拟站点
         */
        function addVirStation() {
            if (confirm("确认新增虚拟车站吗？")) {
                var virtualLineName = $("#virtualLineName").val();
                var _this = $(".vir-text>input");
                addLineVirtualStation(virtualLineName, _this.eq(0).val(), _this.eq(1).val());
            }
        }

        /**
         * 添加任意车站，用于初始只有线路，没有车站
         */
        function addArbitrarilyStation() {
            $(".arbitrarilyStation").show();
        }


        /**
         * 保存任意添加的车站
         */
        function saveArbitrarilyStation() {
            if (confirm("确认新增车站信息吗？")) {
                var arbitrarilyLineName = $("#arbitrarily_lineName").val();
                var _this = $(".ar-text>input");
                var isExchangeStop = $('#ar_transferStation').is(':checked');
                addLineArbitrarilyStation(arbitrarilyLineName, _this.eq(0).val(), _this.eq(1).val(), _this.eq(2).val(), _this.eq(3).val(), _this.eq(4).val(), _this.eq(5).val(), isExchangeStop);
            }
        }

        function DataBind() {
            Subwaymap.actualWidth = 0; Subwaymap.actualHeight = 0; Subwaymap.minWidth = 0; Subwaymap.minHeight = 0;

            $.getJSON(mapJsonUrl, function (data) {
                reloadSubWayLine(data);
            });

            $.getJSON(mapJsonUrl, function (data) {
                var list = [];
                var routePath = "";
                for (let item of data) {
                    let publicStopLength = item.stopsOnRoute.filter(a => a.publishedStop).length;
                    if (publicStopLength > 0) {
                        publicStopListPath(item.stopsOnRoute);
                    } else {
                        subLinePath(item.stopsOnRoute);
                    }
                }
            });


        }

        var lineDrawNum = 0;
        function handLineDraw(event, num) {
            $(".lineDraw > ul >li").removeClass("active");
            event.target.classList.add('active');
            lineDrawNum = num;
            var text = "";

            // var stopsOnRoute = [
            //     { stopX: 1205, stopY: 846 },
            //     { stopX: 1305, stopY: 1046 },
            //     { stopX: 1305, stopY: 1246 }
            // ]

            // var stopsOnRoute = [
            //     { stopX: 1305, stopY: 2046 },
            //     { stopX: 1596, stopY: 2298 },
            //     { stopX: 1568, stopY: 2573 }
            // ]

            var stopsOnRoute = [
                { stopX: 900, stopY: 1300 },
                { stopX: 1200, stopY: 1600 },
                { stopX: 1500, stopY: 1600 }
            ]

            // var stopsOnRoute = [
            //     { stopX: 1800, stopY: 1600 },
            //     { stopX: 2150, stopY: 1400 }
            // ]




            switch (num) {
                case 1:
                    text = straightSubLineStopPath(stopsOnRoute);
                    break;
                case 2:
                    text = rightAngleSubLineStopPath(stopsOnRoute);
                    break;
                case 3:
                    text = graphSubLineStopPath(stopsOnRoute);
                    break;
            }

            var routePath = "L 0 1300 L 275 1300 L 550 1300 L 900 1300 Q 900 1600 1200 1600 L 1200 1600 L 1500 1600 L 1800 1600 Q 2150 1600 2150 1400 L 2150 1400 L 2150 1400";
            var newPath = text;
            var list = routePath.split('L').filter(a => a != "" && a != " ");
            var newList = newPath.split('L').filter(a => a != "" && a != " ");
            var text = "";
            for (item of list) {
                if (item.includes(newList[0])) {
                    text += "L" + newList[0] + "L" + newList[1] + "";
                } else {
                    text += "L" + item + "";
                }

            }

            // console.log(text);
            lineDrawNum = 0;
        }

        $(function () {
            DataBind();
            selLineNameShow();
        })

        const background = document.querySelector('.backimg');
        const container = document.documentElement || document.body;
        var scale = 1;

        function updateBackground(event) {
            const x = event.pageX;
            const y = event.pageY;
            const width = container.offsetWidth;
            const height = container.offsetHeight;
            scale += 1;

            const left = parseInt((x / width) * 120) - 15;
            const top = parseInt((y / height) * 95);

            background.style.backgroundPositionX = `${left}%`;
            background.style.backgroundPositionY = `${top}%`;
            // background.style.backgroundPositionX = "50%";
            // background.style.backgroundPositionY = "50%";
            // background.style.backgroundSize = `${scale * 100}%`;
        }

        // jquery 兼容的滚轮事件
        $(document).on("mousewheel DOMMouseScroll", function (e) {
            let element = document.querySelector('.backimg'); // 选择具有该类的第一个元素
            let style = window.getComputedStyle(element); // 获取计算后的样式
            let backgroundSize = style.getPropertyValue('background-size');
            let first = parseInt(backgroundSize.split(' ')[0].replace("%", ""));
            let second = parseInt(backgroundSize.split(' ')[1].replace("%", ""));
            let wheelDelta = e.originalEvent.wheelDelta;
            if (wheelDelta > 0) {
                first += 20;
                second += 20;
                val = first + "% " + second + "%";
            } else {
                first -= 20;
                second -= 20;
            }
            if (first < 100 || second < 100)
                return false;


            val = first + "% " + second + "%";
            $(".backimg").css({ "background-size": val });

            updateBackground(e);
            subwayMap.zoomViaMouseWheel(e);
        });

        //当浏览器窗口大小改变时，设置显示内容的高度
        $(window).resize(function () {
            var width = $(window).width();
            var height = $(window).height();
            subwayMap.moveToCenter(width, height);
        });

    </script>

</body>
</html>